<template>
  <div id="app">
    <EleHeader
      :seller="seller"
      :index="index"
      :supportsClassMap="supportsClassMap"
    />
    <!-- 单标签引用 -->
    <sellerTabs />
    <router-view :seller="seller" :supportsClassMap="supportsClassMap"/>
  </div>
</template>


<script>
import sellerTabs from "./components/SellerTabs/SellerTab";
import EleHeader from "./components/EleHeader/EleHeader";
export default {
  name: "app",
  components: {
    sellerTabs,
    EleHeader,
  },
  data: () => ({
    seller: {},
    timer: null,
    index: 0,
    supportsClassMap: [
      "decrease",
      "discount",
      "special",
      "invoice",
      "guarantee",
    ],
  }),
  methods: {
    // ES7 请求数据
    async getSellerData() {
      try {
        this.axios.get("/api/seller").then((response) => {
          // console.log(response.data);
          // 获取到数据后，传值给本地变量，然后再传递给子组件
          // console.log(this.seller);
          this.seller = response.data;

          // 数据请求过来才执行轮播图逻辑
          this.startSlider(this.seller.supports);
        });
      } catch (e) {
        console.error(e);
      }
    },

    // 轮播图逻辑
    // arr 请求数据调用该函数时，告诉该函数有多少个优惠信息
    startSlider(arr) {
      if (arr && arr.length > 1) {
        this.timer = setInterval(() => {
          this.index++;
          // 当轮播到最后一个优惠信息时，重新定位到第一个优惠信息
          if (this.index >= arr.length) {
            this.index = 0;
          }
          // console.log(this.index);
        }, 1500);
      }
    },
  },

  created() {
    this.getSellerData(); 
  },
};
</script>

<style lang="scss">
</style>
